
<html>
  <head>
      <title></title>
      <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
      <style type="text/css">
          *{margin: 0;padding: 0;}
          #ball{
              width: 15px;height:15px;
              border-top-left-radius:8px;
              border-top-right-radius:8px;
              border-bottom-left-radius:8px;
              border-bottom-right-radius:8px;
              background-color:purple;
          }
      </style>
  </head>
  <body>
   <div id="ball" style="position: absolute;top:0px;left:0px"></div>  <!-- -------创建小球---------->
   <button style="margin-left: 20px" onclick="">start</button>
  <script type="text/javascript">
      var dball = document.getElementById("ball");
      var width = screen.availWidth;                  ////获得屏幕可用宽度，考虑碰撞
      var height = screen.availHeight;                ////获得屏幕可用高度，考虑碰撞
      var leftposition =parseInt( dball.style.left);  ////获得小球左侧坐标（理解为小球的横向位置）
      var topposition =parseInt(dball.style.top);       ////获得小球上端坐标（理解为小球的纵向向位置）
      var bool=true;                                  //判断小球是否落到地面碰撞，速度增量得由正变为负了
      var boolx =true;                                 //X方向判断是否撞墙需反弹（反弹就是速度由正变为负）  
      var t00= 0,t01= 0;              //t00为小球下落期间，下落的上一个时刻，t01为下一个时刻
      var t10= 0,t11=0;               //t10为小球上升期间，上升的上一个时刻，t11为下一个时刻
      var step=0.1;                   //step为上一个时刻和下一个时刻的时间差
      var speedy= 0;                  //小球下落阶段的位移增量（可以理解为下落时某一时间的速度值）
      var speedy1=0;                  //小球上升阶段的位移增量（可以理解为上升时某一时间的速度值）
      var speedym=0;                  //用来保存小球与地面碰撞的瞬间时的位移增量（即小球下落时的最大速度）
      var a=1.2;                      //小球反弹后，交反弹前的速度损失比例（可以理解为能量损耗）
  /////////////////////////水平方向的X位移，匀速运动，没啥看头//////////////////////////////////
          function xmove(){
            var speedx=2;
            leftposition =parseInt( dball.style.left);
            if(leftposition+15>=width){boolx=true;}
             if(leftposition<0){boolx=false}
            if(boolx){speedx=-2;}else speedx=2;
             dball.style.left =leftposition+speedx+"px";
         }
        var doxmove =setInterval("xmove()",10);   /////线程未设清除，不关闭页面则一直会动下去
  /////////////////////////////////////////////竖直方向的Y位移，核心部分//////////////////////////
         function move()
         {
           if(bool){         ////////初始化为true，则下落
           t01=t00+step;                       // 时间段1： 下一时刻相比于上一时刻
           speedy =5*(t01*t01-t00*t00);         //由公式S=1/2gt1²-1/2gt0²转化而来，g设定为10；
           t00=t01;           // 时间段1 的下一时刻 则是 时间段2的上一时刻 （有点绕，可以理解为T0~T1为一个                                    时间段，T2~T3为相邻的下一个时间段，则T1==T2）
               topposition=parseInt(dball.style.top); 
               dball.style.top=topposition+speedy+"px";       /////小球在某一时刻的位置变化
        if(topposition+100>=height){
       speedym=speedy;   //////保存最大位移增量，为下面反弹记录反弹时的初始位移增量（反弹的初始速度）
       t00=0;t01=0; //此时，下落过程结束，必须初始化两个时刻（因为时刻不同，反应出的位移增量（速度）也不同）
        bool=false;        ///// 改变状态，得上升了
                                             }   
           }
          else{
           t11=t10+step;    //上升阶段和下落阶段的本质区别在于：下落阶段的初始速度为 0，上升阶段的初始速度为一个不为0的向上的值，其他的过程和状态都一致
               speedy1 =5*(t11*t11-t10*t10);
               t10=t11;
               topposition=parseInt(dball.style.top);
          dball.style.top=topposition-(speedym/a)+speedy1+"px"; //  (speedym/a)为上升阶段的初始位移增量（速度），a为能耗
               if(speedy1-(speedym/a)>=0){     //  向下的位移增量（速度）和初始位移增量（速度）相等时，小球上升到最大高度，此时位移增量为0，改下落了
                                          t10=0;t11=0;               
                                          bool=true;
                                          a=a+0.05;                 //因为每撞击一次，小球第二次的下落速度会变小，因为速度越小，撞击时能量损耗越大，所以能量损耗比例越高
                                          }                         //这也是模拟客观物体运动所需
           }
         }
           var doymove =setInterval("move()",10);                    //每10毫秒运行一次。没有关闭线程哦，但小球最终会在Y方向停下来，并不需要人为给它停止 。 （小球虽然停了，但线程依然在执行哦）
  </script>
  </body>
  </html>